<template>
  <el-form :model="registry" class="w-50 mx-auto mt-5">
    <el-form-item >
      <div class="fs-1 mx-auto">学习笔记用户注册</div>
    </el-form-item>
    <el-form-item>
      <img src="@/assets/logo.png" class="mx-auto" style="width:5rem">
    </el-form-item>
    <el-form-item>
      <el-input v-model="registry.username" class="w-50 mx-auto" placeholder="用户名"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input v-model="registry.password" class="w-50 mx-auto" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input v-model="registry.confirmPass" class="w-50 mx-auto" placeholder="确认密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input v-model="registry.authorName" class="w-50 mx-auto" placeholder="昵称"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="mx-auto" @click="registryAction">注册</el-button>
    </el-form-item>
    <el-form-item>
      <div class="mx-auto">
        注册即表示您愿意并遵守用户协议和隐私政策
      </div>
    </el-form-item>
    <el-form-item>
      <div class="mx-auto w-50">
        已有账户，立即 <router-link to="/login">登录</router-link>
      </div>
    </el-form-item>  
  </el-form>
</template>

<script>
export default {
  name: "RegistryFrame",
  data() {
    return {
      //注册时，需要绑定的数据
      registry: {
        username: null,//绑定用户名
        password: null,//密码
        confirmPass: null,//确认密码
        authorName: null,//笔名
      },
    };
  },
  methods:{
    registryAction() {
        if(this.registry.password == this.registry.confirmPass){
          this.$axios.post('/api/registry',this.registry)
          .then(response =>{
              let data = response.data;
              if(data.code==200){
                this.$router.push('/login')
              }else{
                alert(data.msg);
              }
          }) 
        }else{
          alert('两次输入·的密码不一致')
        }
    }
  }
};
</script>

<style>
</style>